<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 挂载点元素 -->
    <div id="root"></div>

    <!-- 
      引入核心类库 
      1. react      React核心
        React
      2. react-dom  React操作DOM相关的核心
        ReactDOM
    -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <script>
      // console.log("React", window.React);
      // console.log("ReactDOM", window.ReactDOM);

      // ReactDOM.render("要渲染的内容", document.querySelector("#root"));
      // ReactDOM.render is no longer supported in React 18. Use createRoot instead.
      // 18版本开始，ReactDOM.render 不再推荐使用，而是需要修改成先创建容器（root) 再渲染的方式。

      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render("要渲染的内容");
    </script>
  </body>
</html>
